<template>
   <div>
         <div style="width:100%" class="flex">
             <img   class="stateImg" :src="require('@/assets/state/'+getNowState.src)"> 
             <div id="value" v-if="DataState==1">{{getNowState.value +'.'.repeat(count)}}</div>     
            <div id="value" v-else>{{getNowState.value}}</div>     
         </div> 

         <!-- <div id="Fun" v-if="DataState!=1">
             <el-button icon="el-icon-refresh-left" class="button">刷新</el-button>
         </div> -->
   </div>
</template>
<script>
import {mapState} from 'vuex'
  export default 
  {
     name :'',
       computed:{
       ...mapState('Personal',['DataState']),
       getNowState(){
         return this.imglist.find(item => item.state==this.DataState)
       },
     },
     data() {
        return {
            imglist:[
                {src:'loading.png',state:1,value:'加载中'},
                {src:'null.png',state:3,value:'空数据'},
                {src:'error.png',state:4,value:'网络或其他错误'},
                {src:'permission.png',state:5,value:'没有权限'},
            ],
            count:0,
            timer:null,
        }
     }, 
     methods:{
        load(){
           this.timer=setInterval(() => {
              this.count=(this.count+1)%4
           }, 1000);
        },
        unload(){
          this.count=0
          clearInterval(this.timer)
        }
     },
     watch:{
        DataState:{
          immediate:true,
          handler(newValue){
              if(newValue==1) this.load()         
              else this.unload()
          }
        }
     },
     beforeDestroy(){
        this.unload()
     }
  }
</script>
<style scoped lang='less'>
.stateImg{
    width: 50%;
    max-width: 400px;
    object-fit: cover;
}
#value{
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
}
#Fun{
    position: absolute;
    right: 50px;top: 50px;

    .button{
      border: none;
      background: var(--GeneralBackColor-half);
      color: white;
      font-weight: 600;
    }
}
</style>